<template>
  <div class="root">
    <div class="top">
      <div class="title">
        <span>{{ $route.query.name }}</span>
      </div>
    </div>
    <div class="mid">
      <span>专家列表</span>
    </div>
    <div class="show">
      <Card_Doc v-if="docInfo.length>0" v-for="(item,index) in docInfo" :key="index" :docInfo="item" 
      :name="$route.query.name" :hospital="$route.query.hospital" :sid="$route.query.sid" 
      :did="item.did" :price="item.price"></Card_Doc>
      <div v-else>暂无数据</div>
    </div>
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router';
import Card_Doc from '@/components/Card_Doc.vue'
import { onMounted,ref } from 'vue';
import { reqGetDoctor } from '@/api/hospital';

const $route=useRoute()

// 存储科室医生信息
const docInfo=ref([])

onMounted(async ()=>{
  let res=await reqGetDoctor($route.query.sid)
  console.log(res)
  if(res.data.code==1){
    docInfo.value=res.data.data
    console.log(docInfo.value)
  }
})

</script>

<style lang="scss" scoped>
.root{
  // width: 1920px;
  min-width:1800px;
  height: 1080px;
  .top{
    height: 60px;
    margin-left:20px;
    .title{
      span{
        font-size: 32px;
      }
    }
    .content{
      font-size: 18px;
      margin-top: 5px;
      // color: #bebebe;
    }
  }
  .mid{
    background-color: #fff;
    height: 60px;
    line-height: 60px;
    font-size: 20px;
    color: orange;
    border-radius: 6px;
    padding-left: 5px;
    // margin-left:20px;
  }
  .show{
    margin-top: 30px;
    // margin-left:20px;
    height: 100px;
    div{
      font-size: 32px;
      color: #bbb;
      margin-left: 50%;
    }
  }
}
</style>
